<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>num-animation</title>
</head>

<body>
    <h3>9999</h3>
    <button onclick="actionEvent()">action</button>
</body>
<script>
    const h = document.querySelector('h3')

    function actionEvent() {
        animation(3000, 9999, 1, (value) => {
            h.textContent = value
        })
    }

    function animation(duration, from, to, onProgress) {
        const dis = to - from
        const speed = dis / duration
        const startTiem = Date.now()
        let value = from
        onProgress(value.toFixed(2))

        function _run() {
            const now = Date.now()
            const time = now - startTiem
            if (time >= duration) {
                value = to
                onProgress(value)
                return
            }
            const d = speed * time
            value = from + d
            onProgress(value.toFixed(2))
            requestAnimationFrame(_run)
        }

        requestAnimationFrame(_run)
    }
</script>

</html>